import React, { Component } from 'react';
class ClockComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '初始值',
      date: new Date()
    };
  }

  //组件第一次加载到DOM
  componentDidMount() {
    //todo 组件加载前添加一个定时更新动作
    this.timeID = setInterval(() => this.upDataTime(), 1000);
  }

  //卸载组件
  componentWillUnmount() {
    //todo 组件卸载是时清楚定时器
    clearInterval(this.timeID);
  }

  //添加一个更新时间的方法
  upDataTime() {
    this.setState({ date: new Date() });
  }

  render() {
    return (
      <div>
        <p>这是一个时钟控件</p>
        <p>它会自己更新时间</p>
        <p>
          <span>当前时间 :</span>
          <span>{this.state.date.toLocaleTimeString()}</span>
        </p>
      </div>
    );
  }
}

export default ClockComponent;
